<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard-editor-container {
  padding: 18px 22px 22px 22px;
  background-color: rgb(240, 242, 245);
  margin-bottom: 80px;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}
</style>
<template>
  <div class="dashboard-container">
    <div class="dashboard-editor-container">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>运行状况日志列表</span>
        </div>
        <!--工具栏-->
        <div class="head-container">
          <crudOperation :permission="permission"/>
        </div>
        <!--表格渲染-->
        <el-table ref="table" :data="crud.data" style="width: 100%;" v-loading="crud.loading"
                  @select="crud.selectChange"
                  @select-all="crud.selectAllChange" @selection-change="crud.selectionChangeHandler"
                  @filter-change="crud.handleFilterChange"
                  :header-cell-style="{ background: 'rgba(52, 125, 225, 0.1)', color: '#404248' }" border stripe>
          <el-table-column v-if="columns.visible('srcType')" prop="srcType" label="来源类型" min-width="100"
                           :formatter="srcTypeFormatter"
                           :filters="srcTypeStatusDict" key="srcType"
                           filter-placement="bottom-end" :filter-multiple="false" column-key="srcType">
            <template slot-scope="scope">
              {{ formatterSrcType(scope.row.srcType) }}
            </template>
          </el-table-column>
          <el-table-column v-if="columns.visible('srcName')" prop="srcName" label="来源名称"/>
          <el-table-column v-if="columns.visible('warnLevel')" prop="warnLevel" label="级别" min-width="100"
                           :filters="warnLevelStatusDict" key="warnLevel"
                           filter-placement="bottom-end" :filter-multiple="false" column-key="warnLevel">
            <template slot-scope="scope">
              <el-tag size="medium" :type="formatterwarnLevelType(scope.row.warnLevel)">
                {{ formatterwarnLevel(scope.row.warnLevel) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column v-if="columns.visible('remindTitle')" prop="remindTitle" label="标题"/>
          <el-table-column v-if="columns.visible('remindContent')" :show-overflow-tooltip="true" prop="remindContent"
                           label="内容"/>
          <el-table-column v-if="columns.visible('crtTs')" prop="crtTs" label="创建时间">
            <template slot-scope="scope">
              <i class="el-icon-time"></i>
              <span style="margin-left: 10px">{{ scope.row.crtTs }}</span>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
    <!-- 数据备份 -->
    <el-dialog append-to-body :close-on-click-modal="false" :visible.sync="crud.backUp" title="服务器交互日志备份" width="680px">
      <el-form ref="form" :inline="true" :model="form" size="small" label-width="160px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="备份日期">
              <el-date-picker style="margin-left: 50px" v-model="backUpDate" type="date" value-format="yyyy-MM-dd"
                              placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button icon="el-icon-document-delete" @click="backUpCancel()">取消</el-button>
        <el-button icon="el-icon-document-add" type="primary" @click="backUpSubmit()">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import runLogServer from '@/api/system/logManager'
import CRUD, {presenter, header, form, crud} from '@crud/crud'
import crudOperation from '@crud/extend/log/CRUD.operation'
import backUp from '@/api/backUp/backUp'

const queryList = [{
  'cloumValue': 'srcName',
  'cloumName': '来源名称'
}]

//默认去查询
const defaultCrud = CRUD({
  title: '运行状态日志',
  url: '/api/runningStateLog/selectPages',
  sort: 'sort,asc',
  queryList: queryList,
  crudMethod: {...runLogServer}
})

const defaultForm = {}
export default {
  name: 'runningLog',
  components: {crudOperation,},
  mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
  dicts: ['running_src_type', 'runningLog_warn_level'],
  data() {
    return {
      backUpDate: "",
      srcTypeDict: [],
      srcTypeStatusDict: [],
      warnLevelDict: [],
      warnLevelStatusDict: [],
      permission: {
        backUp: ['runningLog:backUp'],
      }
    }
  },
  created() {
    this.srcTypeDict = this.dict.running_src_type;
    this.warnLevelDict = this.dict.runningLog_warn_level;
  },
  watch: {
    srcTypeDict() {
      this.$nextTick(() => {
        this.srcTypeDict.forEach(item => {
          var obj = {
            text: item.label,
            value: item.value
          }
          this.srcTypeStatusDict.push(obj);
        })
      })
    },
    warnLevelDict() {
      this.$nextTick(() => {
        this.warnLevelDict.forEach(item => {
          var obj = {
            text: item.label,
            value: item.value
          }
          this.warnLevelStatusDict.push(obj);
        })
      })
    }
  },
  methods: {
    backUpCancel() {
      this.crud.backUp = false
      this.backUpDate = ""
    },
    backUpSubmit() {
      var data = {
        "dateTs": this.backUpDate,
        "bitchType": "serverLog"
      }
      backUp.backUpData(data)
        .then(() => {
          this.$notify({
            title: '成功',
            message: '数据备份成功',
            type: 'success'
          });
          this.backUpDate = ""
          this.crud.backUp = false
          this.crud.query = {}
          this.crud.params = {}
          this.crud.toQuery()
        })
        .catch(() => {
          this.$notify.error({
            title: '错误',
            message: '数据备份异常'
          });
        });
    },
    srcTypeFormatter(row, column) {
      return this.dict.label.running_src_type[row.srcType]
    },
    formatterwarnLevelType(val) {
      var i;
      if (val == 'info') {
        i = 1;
      } else if (val == 'warn') {
        i = 2;
      } else {
        i = 3;
      }
      const type = ['info', 'success', 'primary', 'warning', 'danger']
      return type[i]
    },
    formatterwarnLevel(val) {
      return this.dict.label.runningLog_warn_level[val]
    },
    formatterSrcType(val) {
      return this.dict.label.running_src_type[val]
    }
  }
}
</script>
